<template>
  <div>
    <div class="until_title">工地实时监控</div>
    <div class="real-scroll-table">
      <div class="table-heade">
        <div class="table-name">项目名称</div>
        <div class="table-area">所属区域</div>
        <div class="table-date">工期( 天 )</div>
        <div class="table-startDate">开工日期</div>
        <div class="table-build">楼栋数</div>
        <div class="table-buildArea">建筑面积</div>
        <div class="table-mangerPer">管理人员</div>
        <div class="table-laborPer">劳务人员</div>
        <div class="table-safe">安全教育</div>
        <div class="table-today">今日访客</div>
        <div class="table-online">在线塔吊</div>
        <div class="table-status">塔吊状态</div>
        <div class="table-tower">在线升降机</div>
        <div class="table-towerStatus">升降机状态</div>
        <div class="table-video">视频监控</div>
        <div class="table-dust">扬尘</div>
        <div class="table-noise">噪音</div>
        <div class="table-weather">天气</div>
      </div>
      <div class="table-body">
        <div class="infoItem "
           v-for="(item, index) in loopList"
          :class="{odd: (item.index % 2) === 0,even: (item.index % 2) === 1}"
          :style="{
            transform: `translateY(${item.translateY}px)`,
            msTransform: `translateY(${item.translateY}px)`,
          }"
        >
          <div class="table-name ">{{getSubStr(item.projectTitle)}}</div>
          <div class="table-area">{{item.areaName}}</div>
          <div class="table-date">{{item.timeLimit}}</div>
          <div class="table-startDate">{{item.startTime}}</div>
          <div class="table-build">{{item.buildingNum}}</div>
          <div class="table-buildArea">{{item.area}}</div>
          <div class="table-mangerPer">
            {{item.manager}}
            <span>
              <i class="iconfont icon-jianyoushang safeGreen" v-if="item.managerTrend === 1"></i>
              <i class="iconfont icon-jianyouxia warningRed" v-if="item.managerTrend === 2"></i>
            </span>
          </div>
          <div class="table-laborPer">
            {{item.workers}}
            <span>
              <i class="iconfont icon-jianyoushang safeGreen"  v-if="item.workersTrend === 1"></i>
              <i class="iconfont icon-jianyouxia warningRed" v-if="item.workersTrend === 2"></i>
            </span>
          </div>
          <div class="table-safe">
            {{item.safetyEducationNum}}
            <span v-if="item.safetyEducationNumTrend === null">未开通</span>
            <span>
              <i class="iconfont icon-jianyoushang safeGreen"  v-if="item.safetyEducationNumTrend === 1"></i>
              <i class="iconfont icon-jianyouxia warningRed"  v-if="item.safetyEducationNumTrend === 2"></i>
            </span>
          </div>
          <div class="table-today">
            {{item.visitors}}
            <span>
              <i class="iconfont icon-jianyoushang safeGreen"  v-if="item.visitorsTrend === 1"></i>
              <i class="iconfont icon-jianyouxia warningRed" v-if="item.visitorsTrend === 2"></i>
            </span>
          </div>
          <div class="table-online">
            {{item.towerCranes}}
            <span>
              <i class="iconfont icon-jianyoushang safeGreen" v-if="item.towerCranesTrend === 1" ></i>
              <i class="iconfont icon-jianyouxia warningRed" v-if="item.towerCranesTrend === 2"></i>
            </span>
          </div>
          <div class="table-status">
            <span v-if="item.towerCranesStatus === 0 || item.towerCranesStatus === null">正常</span>
            <span v-if="item.towerCranesStatus === 1" class="warningRed">有报警</span>
          </div>
          <div class="table-tower">
            {{item.elevators}}
            <span>
              <i class="iconfont icon-jianyoushang safeGreen"  v-if="item.elevatorsTrend === 1"></i>
              <i class="iconfont icon-jianyouxia warningRed" v-if="item.elevatorsTrend === 2"></i>
            </span>
          </div>
          <div class="table-towerStatus ">
            <span v-if="item.elevatorsStatus === 0 || item.elevatorsStatus === null">正常</span>
            <span v-if="item.elevatorsStatus === 1" class="warningRed">有报警</span>
          </div>
          <div class="table-video " >
            <span v-if="item.videoMonitorPercentages === 100" >{{item.videoMonitorPercentages }}%</span>
            <span v-else-if="item.videoMonitorPercentages > 50 && item.videoMonitorPercentages < 100" class="alarm">{{item.videoMonitorPercentages }}%</span>
            <span v-else class="warningRed">{{item.videoMonitorPercentages || 0}}%</span>
          </div>
          <div class="table-dust">
            <span v-if="item.dustStatus === 0 || item.dustStatus === null">正常</span>
            <span v-if="item.dustStatus === 1" class="warningRed">超标</span>
          </div>
          <div class="table-noise " >
            <span v-if="item.noiseStatus === 0 || item.noiseStatus === null">正常</span>
            <span v-if="item.noiseStatus === 1" class="warningRed">超标</span>
          </div>
          <div class="table-weather">
            <span >{{item.weather}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import { mapGetters } from 'vuex'
    export default {
      name: 'realMonitor',
      data () {
        return {
          realList: new Map(),
          realListJson: new Map(),
          loopList: [],
          page: 1,
          pages: null,
          isInitInterval: true,
          setStartLoopTime: null,
          setStartTime: null
        }
      },
      mounted () {
        this.startLoop()
        // this.addPage()
      },
      watch: {
        currentUser (newValue, oldValue) {
          if (newValue.companyTitle !== oldValue.companyTitle) {
            clearInterval(this.setStartLoopTime)
            clearInterval(this.setStartTime)
            this.page = 1
            this.isInitInterval = true
            this.realList.clear()
            this.realListJson.clear()
            this.loopList = []
            this.startLoop()
          }
        }
      },
      computed: {
        ...mapGetters({
          currentUser: 'currentUser'
        })
      },
      methods: {
        concatData () {
          return new Promise((resolve) => {
            ([...this.realList.values()]).forEach((item, index) => {
              if (index < 6 && this.isInitInterval) {
                let obj = {...item, ...{translateY: 36 * index, movePx: 0, index: index}}
                this.realListJson.set(obj.id, obj)
              } else {
                let obj = {...item, ...{translateY: 36 * 6, movePx: 0, index: index}}
                this.realListJson.set(obj.id, obj)
              }
            })
            if (this.isInitInterval) {
              this.isInitInterval = false
              this.getLoopList()
              this.initInterval()
              this.setStartLoopTime = setInterval(() => {
                this.startLoop()
              }, 1000 * 20)
            }
            resolve()
          })
        },
        getLoopList () {
          for (const item of this.realListJson) {
            if (item[1].index < 7) {
              this.loopList.push(item[1])
            }
          }
        },
        initInterval () {
          let index = 7
          this.setStartTime = setInterval(() => {
            let sourceIndex = this.realListJson.size
            this.loopList.forEach((item, i) => {
              if (item) {
                let length = this.loopList.length
                item.translateY--
                item.movePx++
                if (length < 7) {
                  if (index === sourceIndex) {
                    index = 0
                  }
                  let arr = ([...this.realListJson.values()])
                  this.loopList.push(arr[index])
                  index++
                }
                if (item.translateY <= -36) {
                  item.translateY = 218
                  item.movePx = 0
                  this.loopList.splice(i, 1)
                }
              }
            })
            return this.setStartTime
          }, 60)
        },
        getSiteMonitorInfo () {
          return new Promise((resolve) => {
            let data = {
              code: this.currentUser.code,
              page: this.page,
              pageSize: 10,
              mid: this.currentUser.mid,
              coId: this.currentUser.coId
            }
            if (!this.currentUser.coId) return   // 防止企业ID为空请求报错
            this.$axios({
              method: 'post',
              url: `${this.$site.videoServer}/api/companyScreen/getSiteMonitorInfo`,
              closeMessage: true,
              data: this.$qs.stringify(data)
            }).then(res => {
              let data = res.data.data;
              // this.realList = Array.from(new Set([...this.realList, ...data.dataList]))
              (data.dataList).forEach((item, index) => {
                this.realList.set(item.id, item)
              })
              this.pages = data.pages
              this.page++
              if (this.page > this.pages) {
                this.page = 1
              }
              resolve()
            })
          })
        },
        async startLoop () {
          await this.getSiteMonitorInfo()
          await this.concatData()
        },
        // 截取字符串中间用省略号显示
        getSubStr (str) {
          if (str.length > 10) {
            let subStr1 = str.substr(0, 4)
            let subStr2 = str.substr(str.length - 4, 4)
            var subStr = subStr1 + '...' + subStr2
            return subStr
          } else {
            return str
          }
        }
      }
    }
</script>

<style scoped lang="scss">
  .real-scroll-table{
    .safeGreen{
      color: #00ff56;
    }
    .warningRed{
      color: #e74646;
    }
    .alarm {
      color: #ffc600;
    }
    .table-name{
      padding-left: 10px;
      width: 9%;
      box-sizing: border-box;
      text-align: left;
    }
    .table-area{
      width: 4%;
      text-align: left;
    }
    .table-date {
      width: 5%;
      text-align: right;
    }
    .table-startDate{
      width: 5%;
      text-align: left;
      margin-left: 2%;
    }
    .table-build{
      width: 3.1%;
      text-align: right;
    }
    .table-buildArea{
      width: 3.3%;
      text-align: left;
      margin-left: 3%;
    }
    .table-mangerPer{
      width: 4.4%;
      text-align: right;
    }
    .table-laborPer,
    .table-safe,
    .table-today,
    .table-online{
      width: 5.5%;
      text-align: right;
    }
    .table-status{
      margin-left: 2%;
      width: 5%;
      text-align: left;
    }
    .table-tower{
      width: 4.5%;
      text-align: right;
    }
    .table-towerStatus{
      width: 6%;
      text-align: left;
      margin-left: 2%;
    }
    .table-video{
      width: 3.5%;
      text-align: right;
    }
    .table-dust,
    .table-noise,
    .table-weather{
      width: 4%;
      text-align: center;
    }

    .table-heade {
      min-width: 1850px;
      width: 100%;
      height:36px;
      background:rgba(11,46,68,1);
      border:1px solid rgba(13,57,84,1);
      color:rgba(226,226,226,1);
      > div {
        display: inline-block;
        line-height: 36px;
      }
    }
    .table-body {
      min-width: 1850px;
      height: 216px;
      width: 100%;
      position: relative;
      overflow: hidden;
      border:1px solid rgba(13,57,84,1);
      border-top: 0px;
      .infoItem{
        width: 100%;
        position: absolute;
        height: 36px;
        border-bottom:1px solid rgba(13,57,84,1);
        > div {
          display: inline-block;
          line-height: 36px;
        }
        &.odd{
          background-color: #092232;
        }
        &.even{
          background-color: #0B2E44;
        }
      }
    }
  }

</style>
